<template>
  <div class="energy-analysis-container">
    <el-page-header content="能效成本分析" style="margin-bottom: 20px;"></el-page-header>

    <!-- 设备能耗排名 -->
    <el-card shadow="hover" class="stat-card">
      <div slot="header">
        <span>设备能耗排名（TOP10高耗能）</span>
        <el-select
            v-model="energyRankType"
            placeholder="选择设备类型"
            style="width: 200px; margin-left: 20px;"
        >
          <el-option label="变压器" value="transformer"></el-option>
          <el-option label="开关柜" value="switchgear"></el-option>
        </el-select>
      </div>
      <el-table
          :data="energyRankList"
          border
          style="width: 100%; margin-top: 10px;"
      >
        <el-table-column prop="deviceName" label="设备名称" min-width="120"></el-table-column>
        <el-table-column prop="loadRate" label="负载率(%)"></el-table-column>
        <el-table-column prop="energy" label="单位能耗(kWh/负荷率)" align="right"></el-table-column>
        <el-table-column prop="compare" label="同比偏差" align="right">
          <template slot-scope="scope">
            <span :class="scope.row.compare > 0 ? 'text-red' : 'text-green'">
              {{ scope.row.compare > 0 ? '+' : '' }}{{ scope.row.compare }}%
            </span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 线损分析 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card shadow="hover" class="stat-card">
          <div slot="header">
            <span>线路损耗分析</span>
          </div>
          <div id="linelossBar" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card shadow="hover" class="stat-card">
          <div slot="header">
            <span>高损耗线路详情</span>
          </div>
          <el-table
              :data="highLossLineList"
              border
              style="width: 100%; margin-top: 10px;"
              height="300"
          >
            <el-table-column prop="lineName" label="线路名称"></el-table-column>
            <el-table-column prop="lossRate" label="线损率(%)" align="right"></el-table-column>
            <el-table-column prop="location" label="异常位置"></el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="viewLineDetail(scope.row)">查看详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 成本拆解 -->
    <el-card shadow="hover" class="stat-card" style="margin-top: 20px;">
      <div slot="header">
        <span>运维成本多维拆解</span>
        <el-radio-group v-model="costDimension" size="small" style="margin-left: 20px;">
          <el-radio-button label="设备类型"></el-radio-button>
          <el-radio-button label="区域"></el-radio-button>
          <el-radio-button label="维护类型"></el-radio-button>
        </el-radio-group>
      </div>
      <div id="costPie" style="width: 100%; height: 350px;"></div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { ElMessage } from 'element-ui'

export default {
  name: 'EnergyCostAnalysis',
  data() {
    return {
      energyRankType: 'transformer',
      energyRankList: [
        {
          deviceName: '110kV#012变压器',
          loadRate: 65,
          energy: 2.35,
          compare: 15.2
        },
        {
          deviceName: '110kV#015变压器',
          loadRate: 70,
          energy: 2.18,
          compare: 8.7
        }
      ],
      highLossLineList: [
        {
          lineName: '110kV#A线',
          lossRate: 5.8,
          location: '#3-#5区段'
        },
        {
          lineName: '10kV#B线',
          lossRate: 4.2,
          location: '#8-#10区段'
        }
      ],
      costDimension: '设备类型',
      lineLossChart: null,
      costPieChart: null
    }
  },
  mounted() {
    this.initCharts()
  },
  methods: {
    initCharts() {
      // 线损分析柱状图
      this.lineLossChart = echarts.init(document.getElementById('linelossBar'))
      this.lineLossChart.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: ['110kV#A线', '110kV#B线', '10kV#C线', '10kV#D线', '10kV#E线']
        },
        yAxis: { type: 'value', name: '线损率(%)' },
        series: [
          {
            name: '线损率',
            type: 'bar',
            data: [5.8, 3.2, 4.2, 2.7, 3.9]
          }
        ]
      })

      // 成本拆解饼图
      this.costPieChart = echarts.init(document.getElementById('costPie'))
      this.updateCostPie()
    },
    updateCostPie() {
      let data = []
      if (this.costDimension === '设备类型') {
        data = [
          { value: 45, name: '变压器' },
          { value: 25, name: '开关柜' },
          { value: 15, name: '电缆' },
          { value: 15, name: '其他' }
        ]
      } else if (this.costDimension === '区域') {
        data = [
          { value: 30, name: '华东' },
          { value: 25, name: '华北' },
          { value: 20, name: '华南' },
          { value: 25, name: '其他' }
        ]
      } else {
        data = [
          { value: 40, name: '预防性维护' },
          { value: 35, name: '故障维修' },
          { value: 25, name: '技改' }
        ]
      }

      this.costPieChart.setOption({
        title: { text: '', left: 'center' },
        tooltip: { trigger: 'item' },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: data.map(item => item.name)
        },
        series: [
          {
            name: '成本占比',
            type: 'pie',
            radius: ['40%', '70%'],
            data: data
          }
        ]
      })
    },
    viewLineDetail(row) {
      // TODO: 跳转到线路详情页
      ElMessage.info(`查看线路 ${row.lineName} 详情`)
    }
  },
  watch: {
    costDimension() {
      this.updateCostPie()
    }
  },
  beforeDestroy() {
    if (this.lineLossChart) this.lineLossChart.dispose()
    if (this.costPieChart) this.costPieChart.dispose()
  }
}
</script>

<style scoped>
.energy-analysis-container {
  padding: 20px;
}
.stat-card {
  height: 100%;
}
.text-red {
  color: #f56c6c;
}
.text-green {
  color: #67c23a;
}
</style>